<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀赛事中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'king-primary': '#C89B3C',
                        'king-secondary': '#9E2A2B',
                        'king-dark': '#1A1A1A',
                        'king-light': '#F5F0E8',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-b from-king-dark to-gray-900 text-white min-h-screen">
<header class="sticky top-0 z-50 bg-king-dark/80 bg-blur border-b border-king-primary/30">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <a href="home-main.html" class="flex items-center gap-2 text-king-primary hover:text-white transition-colors">
            <i class="fa fa-arrow-left"></i>
            <span>返回主页</span>
        </a>

        <h1 class="text-[clamp(1.2rem,3vw,1.8rem)] font-bold text-king-primary text-shadow">
            王者荣耀赛事中心
        </h1>

        <div class="w-24"></div>
    </div>
</header>

<main class="container mx-auto px-4 py-8">
    <section class="mb-12">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 rounded-full bg-king-secondary flex items-center justify-center">
                <i class="fa fa-bullhorn text-xl"></i>
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">赛事公告</h2>
        </div>

        <div class="space-y-4">
            <div class="bg-gray-800/50 rounded-xl p-6 border border-king-primary/20 hover:border-king-primary/60 transition-all hover:shadow-lg hover:shadow-king-primary/10">
                <div class="flex justify-between items-start mb-3">
                    <h3 class="text-xl font-semibold text-king-primary">2025王者荣耀世界锦标赛即将开启</h3>
                    <span class="text-sm text-gray-400">2025-09-14</span>
                </div>
                <p class="text-gray-300 mb-4">备受瞩目的王者荣耀世界锦标赛将于10月正式拉开帷幕，来自全球的16支顶尖战队将角逐总冠军荣誉和高额奖金池。本次赛事将采用全新赛制，带来更加精彩的对抗体验。</p>
                <a href="#" class="inline-flex items-center text-king-primary hover:text-white transition-colors">
                    查看详情 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>

            <div class="bg-gray-800/50 rounded-xl p-6 border border-king-primary/20 hover:border-king-primary/60 transition-all hover:shadow-lg hover:shadow-king-primary/10">
                <div class="flex justify-between items-start mb-3">
                    <h3 class="text-xl font-semibold text-king-primary">高校赛报名通道已开启</h3>
                    <span class="text-sm text-gray-400">2025-09-10</span>
                </div>
                <p class="text-gray-300 mb-4">2025年王者荣耀高校赛正式启动，面向全国高校学生开放报名。优胜队伍将有机会晋级全国总决赛，并获得与职业战队交流的机会。报名截止日期为9月30日。</p>
                <a href="#" class="inline-flex items-center text-king-primary hover:text-white transition-colors">
                    查看详情 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>

            <div class="bg-gray-800/50 rounded-xl p-6 border border-king-primary/20 hover:border-king-primary/60 transition-all hover:shadow-lg hover:shadow-king-primary/10">
                <div class="flex justify-between items-start mb-3">
                    <h3 class="text-xl font-semibold text-king-primary">职业联赛夏季赛总决赛门票发售</h3>
                    <span class="text-sm text-gray-400">2025-09-05</span>
                </div>
                <p class="text-gray-300 mb-4">王者荣耀职业联赛夏季赛总决赛门票将于9月15日正式发售，本次总决赛将在上海体育馆举行。购票成功的观众还将获得限定游戏道具礼包。</p>
                <a href="#" class="inline-flex items-center text-king-primary hover:text-white transition-colors">
                    查看详情 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
        </div>

        <div class="mt-6 text-center">
            <button class="px-6 py-3 bg-king-primary/20 hover:bg-king-primary/40 text-king-primary border border-king-primary/50 rounded-full transition-all">
                查看更多公告 <i class="fa fa-refresh ml-1"></i>
            </button>
        </div>
    </section>
</main>

<footer class="bg-king-dark border-t border-king-primary/30 py-6 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p class="mt-2">LRF 制作</p>
        <p>王者荣耀赛事中心 &copy; 2025 版权所有</p>

    </div>
</footer>

<script>
    document.querySelectorAll('section > div > div').forEach(card => {
        const originalHeight = card.offsetHeight;

        card.addEventListener('click', function(e) {
            if (e.target.closest('a')) return;

            this.classList.toggle('scale-[1.01]');
            setTimeout(() => {
                this.classList.toggle('scale-[1.01]');
            }, 300);
        });
    });

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
</script>
</body>
</html>
